<template>
  <div class="hv-form-property-container">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="baseProperty" header="基本属性">
        <hv-base-props-group :compData="propData" />
      </a-collapse-panel>

      <a-collapse-panel key="styleProperty" header="样式属性">
        <div class="hv-form-data-container">
          <hv-border-style-group :compData="propData" />
          <hv-transform-group :compData="propData" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="compOptionProperty" header="组件属性">
        <div class="hv-form-data-container" v-if="propData && propData.componentProps">
          <template v-if="propData.componentProps.title">
            <a-row>
              <a-col :span="24">
                <span class="hv-visual-property-label">标题设置：</span>
                <a-switch
                  checked-children="显示标题"
                  un-checked-children="隐藏标题"
                  v-model:checked="propData.componentProps.title.show"
                />
              </a-col>
            </a-row>

            <a-row class="hv-margin-bottom10">
              <a-col :span="24">
                <hv-visual-property-sub-row>
                  <template #title>标题内容：</template>
                  <template #content>
                    <a-input v-model:value="propData.componentProps.title.text" />
                  </template>
                </hv-visual-property-sub-row>

                <template v-if="propData.componentProps.title.textStyle">
                  <hv-visual-property-sub-row>
                    <template #leftTitle>标题字号：</template>
                    <template #leftContent>
                      <a-input-number
                        v-model:value="propData.componentProps.title.textStyle.fontSize"
                        :min="8"
                        :max="999"
                        :step="1"
                        size="small"
                      />
                    </template>
                    <template #rightTitle>标题粗细：</template>
                    <template #rightContent>
                      <a-input-number
                        v-model:value="propData.componentProps.title.textStyle.fontWeight"
                        :min="100"
                        :max="900"
                        :step="100"
                        size="small"
                      />
                    </template>
                  </hv-visual-property-sub-row>

                  <hv-visual-property-sub-row>
                    <template #title>标题颜色：</template>
                    <template #content>
                      <hv-color-dropdown-picker
                        v-model:color="propData.componentProps.title.textStyle.color"
                        size="small"
                      />
                    </template>
                  </hv-visual-property-sub-row>
                </template>

                <hv-visual-property-sub-row>
                  <template #title>子标题内容：</template>
                  <template #content>
                    <a-input v-model:value="propData.componentProps.title.subtext" />
                  </template>
                </hv-visual-property-sub-row>

                <template v-if="propData.componentProps.title.subtextStyle">
                  <hv-visual-property-sub-row>
                    <template #leftTitle>子标题字号：</template>
                    <template #leftContent>
                      <a-input-number
                        v-model:value="propData.componentProps.title.subtextStyle.fontSize"
                        :min="8"
                        :max="999"
                        :step="1"
                        size="small"
                      />
                    </template>
                    <template #rightTitle>子标题粗细：</template>
                    <template #rightContent>
                      <a-input-number
                        v-model:value="propData.componentProps.title.subtextStyle.fontWeight"
                        :min="100"
                        :max="900"
                        :step="100"
                        size="small"
                      />
                    </template>
                  </hv-visual-property-sub-row>

                  <hv-visual-property-sub-row>
                    <template #title>子标题颜色：</template>
                    <template #content>
                      <hv-color-dropdown-picker
                        v-model:color="propData.componentProps.title.subtextStyle.color"
                        size="small"
                      />
                    </template>
                  </hv-visual-property-sub-row>
                </template>
              </a-col>
            </a-row>
          </template>

          <template v-if="propData.componentProps.tooltip">
            <a-row>
              <a-col :span="24">
                <span class="hv-visual-property-label">提示框设置：</span>
                <a-switch
                  checked-children="显示提示框"
                  un-checked-children="隐藏提示框"
                  v-model:checked="propData.componentProps.tooltip.show"
                />
              </a-col>
            </a-row>

            <a-row class="hv-margin-bottom10">
              <a-col :span="24">
                <hv-visual-property-sub-row>
                  <template #leftTitle>触发方式：</template>
                  <template #leftContent>
                    <a-select
                      v-model:value="propData.componentProps.tooltip.trigger"
                      size="small"
                      placeholder="请选择触发方式..."
                      dropdownClassName="hv-dark-select-dropdown"
                    >
                      <a-select-option
                        :value="option.value"
                        v-for="(option, index) in echartTooltipTriggerListConst"
                        :key="option.value + index"
                        >{{ option.label }}</a-select-option
                      >
                    </a-select>
                  </template>
                  <template #rightTitle>触发时机：</template>
                  <template #rightContent>
                    <a-select
                      v-model:value="propData.componentProps.tooltip.triggerOn"
                      size="small"
                      placeholder="请选择触发时机..."
                      dropdownClassName="hv-dark-select-dropdown"
                    >
                      <a-select-option
                        :value="option.value"
                        v-for="(option, index) in echartTooltipTriggerOnListConst"
                        :key="option.value + index"
                        >{{ option.label }}</a-select-option
                      >
                    </a-select>
                  </template>
                </hv-visual-property-sub-row>

                <hv-visual-property-sub-row>
                  <template #title>
                    <a-popover title="说明" :overlayStyle="{ width: '300px' }">
                      <template #content>
                        formatter函数用于自定义提示框显示内容，未填写内容时不使用该函数；
                        参数名固定为data，参数使用：data.xxx，例子： '名称：' +data.name +
                        data.seriesName;
                      </template>
                      <span>
                        <hv-dynamic-icon iconName="QuestionCircleOutlined" />
                      </span> </a-popover
                    >formatter函数：
                  </template>
                  <template #content>
                    <a-textarea
                      v-model:value="propData.componentProps.tooltip.formatter"
                      placeholder="可输入自定义的formatter"
                      style="height: auto"
                      :rows="3"
                    />
                  </template>
                </hv-visual-property-sub-row>
              </a-col>
            </a-row>
          </template>

          <template v-if="propData.componentProps.legend">
            <a-row>
              <a-col :span="24">
                <span class="hv-visual-property-label">图例设置：</span>
                <a-switch
                  checked-children="显示图例"
                  un-checked-children="隐藏图例"
                  v-model:checked="propData.componentProps.legend.show"
                />
              </a-col>
            </a-row>

            <a-row class="hv-margin-bottom10">
              <a-col :span="24">
                <hv-visual-property-sub-row>
                  <template #leftTitle>图例类型：</template>
                  <template #leftContent>
                    <a-select
                      v-model:value="propData.componentProps.legend.type"
                      size="small"
                      placeholder="请选择图例类型..."
                      dropdownClassName="hv-dark-select-dropdown"
                    >
                      <a-select-option
                        :value="option.value"
                        v-for="(option, index) in echartLegendListConst"
                        :key="option.value + index"
                        >{{ option.label }}</a-select-option
                      >
                    </a-select>
                  </template>
                  <template #rightTitle>图例层级：</template>
                  <template #rightContent>
                    <a-input-number
                      v-model:value="propData.componentProps.legend.zlevel"
                      :min="0"
                      :max="9999"
                      :step="1"
                      size="small"
                    />
                  </template>
                </hv-visual-property-sub-row>

                <hv-visual-property-sub-row>
                  <template #leftTitle>图例方向：</template>
                  <template #leftContent>
                    <a-select
                      v-model:value="propData.componentProps.legend.orient"
                      size="small"
                      placeholder="请选择图例方向..."
                      dropdownClassName="hv-dark-select-dropdown"
                    >
                      <a-select-option
                        :value="option.value"
                        v-for="(option, index) in echartOrientListConst"
                        :key="option.value + index"
                        >{{ option.label }}</a-select-option
                      >
                    </a-select>
                  </template>
                  <template #rightTitle>图例内边距：</template>
                  <template #rightContent>
                    <a-input-number
                      v-model:value="propData.componentProps.legend.padding"
                      :min="0"
                      :max="999"
                      :step="1"
                      size="small"
                    />
                  </template>
                </hv-visual-property-sub-row>

                <hv-visual-property-sub-row>
                  <template #leftTitle>距离顶部：</template>
                  <template #leftContent>
                    <hv-echart-distance-input
                      v-model:distanceVal="propData.componentProps.legend.top"
                    />
                  </template>
                  <template #rightTitle>距离底部：</template>
                  <template #rightContent>
                    <hv-echart-distance-input
                      position="bottom"
                      v-model:distanceVal="propData.componentProps.legend.bottom"
                    />
                  </template>
                </hv-visual-property-sub-row>

                <hv-visual-property-sub-row>
                  <template #leftTitle>距离左边：</template>
                  <template #leftContent>
                    <hv-echart-distance-input
                      position="left"
                      v-model:distanceVal="propData.componentProps.legend.left"
                    />
                  </template>
                  <template #rightTitle>距离右边：</template>
                  <template #rightContent>
                    <hv-echart-distance-input
                      position="right"
                      v-model:distanceVal="propData.componentProps.legend.right"
                    />
                  </template>
                </hv-visual-property-sub-row>

                <template v-if="propData.componentProps.legend.textStyle">
                  <hv-visual-property-sub-row>
                    <template #leftTitle>图例字号：</template>
                    <template #leftContent>
                      <a-input-number
                        v-model:value="propData.componentProps.legend.textStyle.fontSize"
                        :min="8"
                        :max="999"
                        :step="1"
                        size="small"
                      />
                    </template>
                    <template #rightTitle>图例粗细：</template>
                    <template #rightContent>
                      <a-input-number
                        v-model:value="propData.componentProps.legend.textStyle.fontWeight"
                        :min="100"
                        :max="900"
                        :step="100"
                        size="small"
                      />
                    </template>
                  </hv-visual-property-sub-row>

                  <hv-visual-property-sub-row>
                    <template #title>图例颜色：</template>
                    <template #content>
                      <hv-color-dropdown-picker
                        v-model:color="propData.componentProps.legend.textStyle.color"
                        size="small"
                      />
                    </template>
                  </hv-visual-property-sub-row>
                </template>
              </a-col>
            </a-row>
          </template>

          <a-row>
            <a-col :span="24" class="hv-visual-property-label">序列设置：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <template
                v-if="propData.componentProps.series && propData.componentProps.series.length > 0"
              >
                <div
                  v-for="(item, index) in propData.componentProps.series"
                  :key="index"
                  class="hv-margin-bottom10"
                >
                  <hv-visual-property-sub-row
                    :left-col-class-list="['hv-text-primary']"
                    :right-col-class-list="[
                      'hv-text-error',
                      'hv-cursor-pointer',
                      'hv-text-align-right',
                    ]"
                  >
                    <template #leftContent>序列{{ index + 1 }}</template>
                    <template #rightContent>
                      <hv-dynamic-icon iconName="DeleteOutlined" @click="removeSeries(index)" />
                    </template>
                  </hv-visual-property-sub-row>

                  <a-row class="hv-margin-bottom10">
                    <a-col :span="24">
                      <hv-visual-property-sub-row>
                        <template #title>序列名称：</template>
                        <template #content>
                          <a-input v-model:value="item.name" />
                        </template>
                      </hv-visual-property-sub-row>

                      <hv-visual-property-sub-row>
                        <template #title>
                          颜色
                          <hv-dynamic-icon
                            iconName="ReloadOutlined"
                            class="hv-visual-property-sub-col-title-btn"
                            title="还原颜色"
                            @click="resetColor(index)"
                          />
                        </template>
                        <template #content>
                          <hv-color-picker-list
                            size="small"
                            defaultColor="#ffff33"
                            v-model:colorList="item.color"
                          />
                        </template>
                      </hv-visual-property-sub-row>

                      <hv-visual-property-sub-row v-if="item.radius">
                        <template #leftTitle>内圈(%)：</template>
                        <template #leftContent>
                          <a-input-number
                            v-model:value="item.radius[0]"
                            :min="0"
                            :max="150"
                            :step="1"
                            size="small"
                          />
                        </template>
                        <template #rightTitle>外圈(%)：</template>
                        <template #rightContent>
                          <a-input-number
                            v-model:value="item.radius[1]"
                            :min="0"
                            :max="150"
                            :step="1"
                            size="small"
                          />
                        </template>
                      </hv-visual-property-sub-row>

                      <hv-visual-property-sub-row v-if="item.center">
                        <template #leftTitle>水平位置：</template>
                        <template #leftContent>
                          <hv-number-unit-input v-model:numVal="item.center[0]" />
                        </template>
                        <template #rightTitle>垂直位置：</template>
                        <template #rightContent>
                          <hv-number-unit-input v-model:numVal="item.center[1]" />
                        </template>
                      </hv-visual-property-sub-row>

                      <hv-visual-property-sub-row>
                        <template #leftTitle>防止标签重叠：</template>
                        <template #leftContent>
                          <a-switch
                            checked-children="防止重叠"
                            un-checked-children="不防止重叠"
                            v-model:checked="item.avoidLabelOverlap"
                          />
                        </template>
                        <template #rightTitle>是否展示南丁格尔图：</template>
                        <template #rightContent>
                          <a-switch
                            checked-children="展示"
                            un-checked-children="不展示"
                            v-model:checked="item.roseType"
                          />
                        </template>
                      </hv-visual-property-sub-row>

                      <template v-if="item.itemStyle">
                        <hv-visual-property-sub-row>
                          <template #leftTitle>图形透明度：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.itemStyle.opacity"
                              :min="0"
                              :max="1"
                              :step="0.1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>边框大小：</template>
                          <template #rightContent>
                            <a-input-number
                              v-model:value="item.itemStyle.borderWidth"
                              :min="0"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>边框圆角：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.itemStyle.borderRadius"
                              :min="0"
                              :max="9999"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>边框类型：</template>
                          <template #rightContent>
                            <a-select
                              v-model:value="item.itemStyle.borderType"
                              size="small"
                              placeholder="请选择边框类型..."
                              dropdownClassName="hv-dark-select-dropdown"
                            >
                              <a-select-option
                                :value="option.value"
                                v-for="(option, itemIndex) in echartsBorderTypeListConst"
                                :key="option.value + itemIndex"
                                >{{ option.label }}</a-select-option
                              >
                            </a-select>
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #title>边框颜色：</template>
                          <template #content>
                            <hv-color-dropdown-picker
                              v-model:color="item.itemStyle.borderColor"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>阴影水平偏移：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.itemStyle.shadowOffsetX"
                              :min="0"
                              :max="100"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>阴影垂直偏移：</template>
                          <template #rightContent>
                            <a-input-number
                              v-model:value="item.itemStyle.shadowOffsetY"
                              :min="0"
                              :max="100"
                              :step="1"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #title>阴影颜色：</template>
                          <template #content>
                            <hv-color-dropdown-picker
                              v-model:color="item.itemStyle.shadowColor"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>阴影模糊大小：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.itemStyle.shadowBlur"
                              :min="0"
                              :max="100"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>鼠标悬浮图形：</template>
                          <template #rightContent>
                            <a-select
                              v-model:value="item.cursor"
                              size="small"
                              placeholder="请选择鼠标悬浮图形..."
                              dropdownClassName="hv-dark-select-dropdown"
                            >
                              <a-select-option
                                :value="option.value"
                                v-for="(option, itemIndex) in cursorListConst"
                                :key="itemIndex"
                                >{{ option.label }}</a-select-option
                              >
                            </a-select>
                          </template>
                        </hv-visual-property-sub-row>
                      </template>

                      <hv-visual-property-sub-row>
                        <template #leftTitle>选中模式：</template>
                        <template #leftContent>
                          <a-select
                            v-model:value="item.selectedMode"
                            size="small"
                            placeholder="请选择选中模式..."
                            dropdownClassName="hv-dark-select-dropdown"
                          >
                            <a-select-option
                              :value="option.value"
                              v-for="(option, itemIndex) in echartsSelectedModeListConst"
                              :key="itemIndex"
                              >{{ option.label }}</a-select-option
                            >
                          </a-select>
                        </template>
                        <template #rightTitle>选中的偏移距离：</template>
                        <template #rightContent>
                          <a-input-number
                            v-model:value="item.selectedOffset"
                            :min="0"
                            :max="100"
                            :step="1"
                            size="small"
                          />
                        </template>
                      </hv-visual-property-sub-row>

                      <hv-visual-property-sub-row>
                        <template #leftTitle>鼠标移入时联动高亮：</template>
                        <template #leftContent>
                          <a-switch
                            checked-children="高亮"
                            un-checked-children="不高亮"
                            v-model:checked="item.legendHoverLink"
                          />
                        </template>
                        <template #rightTitle>数据和为0仍显示扇区：</template>
                        <template #rightContent>
                          <a-switch
                            checked-children="显示"
                            un-checked-children="不显示"
                            v-model:checked="item.stillShowZeroSum"
                          />
                        </template>
                      </hv-visual-property-sub-row>

                      <hv-visual-property-sub-row>
                        <template #leftTitle>起始角度：</template>
                        <template #leftContent>
                          <a-input-number
                            v-model:value="item.startAngle"
                            :min="0"
                            :max="360"
                            :step="1"
                            size="small"
                          />
                        </template>
                        <template #rightTitle>最小的扇区角度：</template>
                        <template #rightContent>
                          <a-input-number
                            v-model:value="item.minAngle"
                            :min="0"
                            :max="360"
                            :step="1"
                            size="small"
                          />
                        </template>
                      </hv-visual-property-sub-row>

                      <hv-visual-property-sub-row>
                        <template #leftTitle>小于当前角度隐藏标签：</template>
                        <template #leftContent>
                          <a-input-number
                            v-model:value="item.minShowLabelAngle"
                            :min="0"
                            :max="360"
                            :step="1"
                            size="small"
                          />
                        </template>
                        <template #rightTitle>层级：</template>
                        <template #rightContent>
                          <a-input-number
                            v-model:value="item.zlevel"
                            :min="0"
                            :max="999"
                            :step="1"
                            size="small"
                          />
                        </template>
                      </hv-visual-property-sub-row>

                      <template v-if="item.label">
                        <hv-visual-property-sub-row>
                          <template #leftTitle>是否展示标签：</template>
                          <template #leftContent>
                            <a-switch
                              checked-children="展示"
                              un-checked-children="不展示"
                              v-model:checked="item.label.show"
                            />
                          </template>
                          <template #rightTitle>标签行高：</template>
                          <template #rightContent>
                            <a-input-number
                              v-model:value="item.label.lineHeight"
                              :min="10"
                              :max="72"
                              :step="1"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>标签宽度：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.label.width"
                              :min="0"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>标签高度：</template>
                          <template #rightContent>
                            <a-input-number
                              v-model:value="item.label.height"
                              :min="0"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>标签内边距：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.label.padding"
                              :min="0"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>标签旋转：</template>
                          <template #rightContent>
                            <hv-select-and-custom-input
                              v-model:selectVal="item.label.rotate"
                              :constList="echartLabelRotateListConst"
                              :inputMax="99"
                              :inputMin="-99"
                              :disableVal="'true'"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #title>标签背景颜色：</template>
                          <template #content>
                            <hv-color-dropdown-picker
                              v-model:color="item.label.backgroundColor"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>标签字体样式：</template>
                          <template #leftContent>
                            <a-select
                              v-model:value="item.label.fontStyle"
                              size="small"
                              placeholder="请选择标签字体样式..."
                              dropdownClassName="hv-dark-select-dropdown"
                            >
                              <a-select-option
                                :value="option.value"
                                v-for="(option, itemIndex) in echartsFontStyleListConst"
                                :key="itemIndex"
                                >{{ option.label }}</a-select-option
                              >
                            </a-select>
                          </template>
                          <template #rightTitle>标签字体粗细：</template>
                          <template #rightContent>
                            <a-input-number
                              v-model:value="item.label.fontWeight"
                              :min="100"
                              :max="900"
                              :step="100"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #title>标签字体颜色：</template>
                          <template #content>
                            <hv-color-dropdown-picker
                              v-model:color="item.label.color"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>标签字号：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.label.fontSize"
                              :min="8"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>标签文本溢出类型：</template>
                          <template #rightContent>
                            <a-select
                              v-model:value="item.label.overflow"
                              size="small"
                              placeholder="请选择标签文本溢出类型..."
                              dropdownClassName="hv-dark-select-dropdown"
                            >
                              <a-select-option
                                :value="option.value"
                                v-for="(option, itemIndex) in echartOverflowListConst"
                                :key="itemIndex"
                                >{{ option.label }}</a-select-option
                              >
                            </a-select>
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>标签边框大小：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.label.borderWidth"
                              :min="0"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>标签边框类型：</template>
                          <template #rightContent>
                            <a-select
                              v-model:value="item.label.borderType"
                              size="small"
                              placeholder="请选择标签边框类型..."
                              dropdownClassName="hv-dark-select-dropdown"
                            >
                              <a-select-option
                                :value="option.value"
                                v-for="(option, itemIndex) in echartsBorderTypeListConst"
                                :key="option.value + itemIndex"
                                >{{ option.label }}</a-select-option
                              >
                            </a-select>
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #title>标签边框颜色：</template>
                          <template #content>
                            <hv-color-dropdown-picker
                              v-model:color="item.label.borderColor"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>标签圆角：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.label.borderRadius"
                              :min="0"
                              :max="9999"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>标签位置：</template>
                          <template #rightContent>
                            <a-select
                              v-model:value="item.label.position"
                              size="small"
                              placeholder="请选择标签位置..."
                              dropdownClassName="hv-dark-select-dropdown"
                            >
                              <a-select-option
                                :value="option.value"
                                v-for="(option, itemIndex) in echartLabelPositionListConst"
                                :key="option.value + itemIndex"
                                >{{ option.label }}</a-select-option
                              >
                            </a-select>
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #title>
                            <a-popover title="说明" :overlayStyle="{ width: '300px' }">
                              <template #content>
                                formatter函数用于自定义提示框显示内容，未填写内容时不使用该函数；
                                参数名固定为data，参数使用：data.xxx，例子： '名称：' +data.name +
                                data.seriesName;
                              </template>
                              <span>
                                <hv-dynamic-icon iconName="QuestionCircleOutlined" />
                              </span> </a-popover
                            >标签formatter函数：
                          </template>
                          <template #content>
                            <a-textarea
                              placeholder="可输入自定义的formatter"
                              style="height: auto"
                              :rows="3"
                              v-model:value="item.label.formatter"
                            />
                          </template>
                        </hv-visual-property-sub-row>
                      </template>

                      <template v-if="item.labelLine">
                        <hv-visual-property-sub-row>
                          <template #leftTitle>是否显示引导线：</template>
                          <template #leftContent>
                            <a-switch
                              checked-children="显示"
                              un-checked-children="不显示"
                              v-model:checked="item.labelLine.show"
                            />
                          </template>
                          <template #rightTitle>引导线显示方式：</template>
                          <template #rightContent>
                            <a-switch
                              checked-children="显示图形上方"
                              un-checked-children="不显示图形上方"
                              v-model:checked="item.labelLine.showAbove"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>引导线第一段长度：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.labelLine.length"
                              :min="0"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>引导线第二段长度：</template>
                          <template #rightContent>
                            <a-input-number
                              v-model:value="item.labelLine.length2"
                              :min="0"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>引导线第二段最小夹角：</template>
                          <template #leftContent>
                            <a-input-number
                              v-model:value="item.labelLine.minTurnAngle"
                              :min="0"
                              :max="180"
                              :step="1"
                              size="small"
                            />
                          </template>
                          <template #rightTitle>引导线第二段最大夹角：</template>
                          <template #rightContent>
                            <a-input-number
                              v-model:value="item.labelLine.maxSurfaceAngle"
                              :min="0"
                              :max="180"
                              :step="1"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>平滑视觉引导线：</template>
                          <template #leftContent>
                            <a-switch
                              checked-children="平滑"
                              un-checked-children="不平滑"
                              v-model:checked="item.labelLine.smooth"
                            />
                          </template>
                          <template #rightTitle>引导线宽度：</template>
                          <template #rightContent>
                            <a-input-number
                              v-if="item.labelLine && item.labelLine.lineStyle"
                              v-model:value="item.labelLine.lineStyle.width"
                              :min="0"
                              :max="180"
                              :step="1"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <template v-if="item.labelLine.lineStyle">
                          <hv-visual-property-sub-row>
                            <template #leftTitle>引导线类型：</template>
                            <template #leftContent>
                              <a-select
                                v-model:value="item.labelLine.lineStyle.type"
                                size="small"
                                placeholder="请选择引导线类型..."
                                dropdownClassName="hv-dark-select-dropdown"
                              >
                                <a-select-option
                                  :value="option.value"
                                  v-for="(option, itemIndex) in echartsBorderTypeListConst"
                                  :key="option.value + itemIndex"
                                  >{{ option.label }}</a-select-option
                                >
                              </a-select>
                            </template>
                            <template #rightTitle>引导线透明度：</template>
                            <template #rightContent>
                              <a-input-number
                                v-model:value="item.labelLine.lineStyle.opacity"
                                :min="0"
                                :max="1"
                                :step="0.1"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #title>引导线透颜色：</template>
                            <template #content>
                              <hv-color-dropdown-picker
                                v-model:color="item.labelLine.lineStyle.color"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>
                        </template>
                      </template>

                      <template v-if="item.emphasis">
                        <hv-visual-property-sub-row>
                          <template #leftTitle>是否开启高亮扇区：</template>
                          <template #leftContent>
                            <a-switch
                              checked-children="显示"
                              un-checked-children="不显示"
                              v-model:checked="item.emphasis.scale"
                            />
                          </template>
                          <template #rightTitle>高亮扇区放大尺寸：</template>
                          <template #rightContent>
                            <a-input-number
                              v-model:value="item.emphasis.scaleSize"
                              :min="0"
                              :max="999"
                              :step="1"
                              size="small"
                            />
                          </template>
                        </hv-visual-property-sub-row>

                        <hv-visual-property-sub-row>
                          <template #leftTitle>高亮扇区聚焦：</template>
                          <template #leftContent>
                            <a-select
                              v-model:value="item.emphasis.focus"
                              size="small"
                              placeholder="请选择高亮扇区聚焦..."
                              dropdownClassName="hv-dark-select-dropdown"
                            >
                              <a-select-option
                                :value="option.value"
                                v-for="(option, itemIndex) in echartEmphasisFocusListConst"
                                :key="option.value + itemIndex"
                                >{{ option.label }}</a-select-option
                              >
                            </a-select>
                          </template>
                          <template #rightTitle>聚焦淡出的范围：</template>
                          <template #rightContent>
                            <a-select
                              v-model:value="item.emphasis.blurScope"
                              size="small"
                              placeholder="请选择聚焦淡出的范围..."
                              dropdownClassName="hv-dark-select-dropdown"
                            >
                              <a-select-option
                                :value="option.value"
                                v-for="(option, itemIndex) in echartEmphasisBlurScopeListConst"
                                :key="option.value + itemIndex"
                                >{{ option.label }}</a-select-option
                              >
                            </a-select>
                          </template>
                        </hv-visual-property-sub-row>

                        <template v-if="item.emphasis.label">
                          <hv-visual-property-sub-row>
                            <template #leftTitle>是否展示高亮标签：</template>
                            <template #leftContent>
                              <a-switch
                                checked-children="展示"
                                un-checked-children="不展示"
                                v-model:checked="item.emphasis.label.show"
                              />
                            </template>
                            <template #rightTitle>高亮标签行高：</template>
                            <template #rightContent>
                              <a-input-number
                                v-model:value="item.emphasis.label.lineHeight"
                                :min="10"
                                :max="72"
                                :step="1"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #leftTitle>高亮标签宽度：</template>
                            <template #leftContent>
                              <a-input-number
                                v-model:value="item.emphasis.label.width"
                                :min="0"
                                :max="999"
                                :step="1"
                                size="small"
                              />
                            </template>
                            <template #rightTitle>高亮标签高度：</template>
                            <template #rightContent>
                              <a-input-number
                                v-model:value="item.emphasis.label.height"
                                :min="0"
                                :max="999"
                                :step="1"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #leftTitle>高亮标签内边距：</template>
                            <template #leftContent>
                              <a-input-number
                                v-model:value="item.emphasis.label.padding"
                                :min="0"
                                :max="999"
                                :step="1"
                                size="small"
                              />
                            </template>
                            <template #rightTitle>高亮标签旋转：</template>
                            <template #rightContent>
                              <hv-select-and-custom-input
                                v-model:selectVal="item.emphasis.label.rotate"
                                :constList="echartLabelRotateListConst"
                                :inputMax="99"
                                :inputMin="-99"
                                :disableVal="'true'"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #title>高亮标签背景颜色：</template>
                            <template #content>
                              <hv-color-dropdown-picker
                                v-model:color="item.emphasis.label.backgroundColor"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #leftTitle>高亮标签字体样式：</template>
                            <template #leftContent>
                              <a-select
                                v-model:value="item.emphasis.label.fontStyle"
                                size="small"
                                placeholder="请选择高亮标签字体样式..."
                                dropdownClassName="hv-dark-select-dropdown"
                              >
                                <a-select-option
                                  :value="option.value"
                                  v-for="(option, itemIndex) in echartsFontStyleListConst"
                                  :key="itemIndex"
                                  >{{ option.label }}</a-select-option
                                >
                              </a-select>
                            </template>
                            <template #rightTitle>高亮标签字体粗细：</template>
                            <template #rightContent>
                              <a-input-number
                                v-model:value="item.emphasis.label.fontWeight"
                                :min="100"
                                :max="900"
                                :step="100"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #title>高亮标签字体颜色：</template>
                            <template #content>
                              <hv-color-dropdown-picker
                                v-model:color="item.emphasis.label.color"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #leftTitle>高亮标签字号：</template>
                            <template #leftContent>
                              <a-input-number
                                v-model:value="item.emphasis.label.fontSize"
                                :min="8"
                                :max="999"
                                :step="1"
                                size="small"
                              />
                            </template>
                            <template #rightTitle>高亮标签文本溢出类型：</template>
                            <template #rightContent>
                              <a-select
                                v-model:value="item.emphasis.label.overflow"
                                size="small"
                                placeholder="请选择标高亮签文本溢出类型..."
                                dropdownClassName="hv-dark-select-dropdown"
                              >
                                <a-select-option
                                  :value="option.value"
                                  v-for="(option, itemIndex) in echartOverflowListConst"
                                  :key="itemIndex"
                                  >{{ option.label }}</a-select-option
                                >
                              </a-select>
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #leftTitle>高亮标签边框大小：</template>
                            <template #leftContent>
                              <a-input-number
                                v-model:value="item.emphasis.label.borderWidth"
                                :min="0"
                                :max="999"
                                :step="1"
                                size="small"
                              />
                            </template>
                            <template #rightTitle>高亮标签边框类型：</template>
                            <template #rightContent>
                              <a-select
                                v-model:value="item.emphasis.label.borderType"
                                size="small"
                                placeholder="请选择高亮标签边框类型..."
                                dropdownClassName="hv-dark-select-dropdown"
                              >
                                <a-select-option
                                  :value="option.value"
                                  v-for="(option, itemIndex) in echartsBorderTypeListConst"
                                  :key="option.value + itemIndex"
                                  >{{ option.label }}</a-select-option
                                >
                              </a-select>
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #title>高亮标签边框颜色：</template>
                            <template #content>
                              <hv-color-dropdown-picker
                                v-model:color="item.emphasis.label.borderColor"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #title>高亮标签圆角：</template>
                            <template #content>
                              <a-input-number
                                v-model:value="item.emphasis.label.borderRadius"
                                :min="0"
                                :max="9999"
                                :step="1"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #title>
                              <a-popover title="说明" :overlayStyle="{ width: '300px' }">
                                <template #content>
                                  formatter函数用于自定义提示框显示内容，未填写内容时不使用该函数；
                                  参数名固定为data，参数使用：data.xxx，例子： '名称：' +data.name +
                                  data.seriesName;
                                </template>
                                <span>
                                  <hv-dynamic-icon iconName="QuestionCircleOutlined" />
                                </span> </a-popover
                              >高亮标签formatter函数：
                            </template>
                            <template #content>
                              <a-textarea
                                placeholder="可输入自定义的formatter"
                                style="height: auto"
                                :rows="3"
                                v-model:value="item.emphasis.label.formatter"
                              />
                            </template>
                          </hv-visual-property-sub-row>
                        </template>

                        <template v-if="item.emphasis.labelLine">
                          <hv-visual-property-sub-row>
                            <template #leftTitle>是否显示高亮引导线：</template>
                            <template #leftContent>
                              <a-switch
                                checked-children="显示"
                                un-checked-children="不显示"
                                v-model:checked="item.emphasis.labelLine.show"
                              />
                            </template>
                            <template #rightTitle>高亮引导线显示方式：</template>
                            <template #rightContent>
                              <a-switch
                                checked-children="显示图形上方"
                                un-checked-children="不显示图形上方"
                                v-model:checked="item.emphasis.labelLine.showAbove"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #leftTitle>高亮引导线第一段长度：</template>
                            <template #leftContent>
                              <a-input-number
                                v-model:value="item.emphasis.labelLine.length"
                                :min="0"
                                :max="999"
                                :step="1"
                                size="small"
                              />
                            </template>
                            <template #rightTitle>高亮引导线第二段长度：</template>
                            <template #rightContent>
                              <a-input-number
                                v-model:value="item.emphasis.labelLine.length2"
                                :min="0"
                                :max="999"
                                :step="1"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #leftTitle>高亮引导线第二段最小夹角：</template>
                            <template #leftContent>
                              <a-input-number
                                v-model:value="item.emphasis.labelLine.minTurnAngle"
                                :min="0"
                                :max="180"
                                :step="1"
                                size="small"
                              />
                            </template>
                            <template #rightTitle>高亮引导线第二段最大夹角：</template>
                            <template #rightContent>
                              <a-input-number
                                v-model:value="item.emphasis.labelLine.maxSurfaceAngle"
                                :min="0"
                                :max="180"
                                :step="1"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <hv-visual-property-sub-row>
                            <template #leftTitle>高亮平滑视觉引导线：</template>
                            <template #leftContent>
                              <a-switch
                                checked-children="平滑"
                                un-checked-children="不平滑"
                                v-model:checked="item.emphasis.labelLine.smooth"
                              />
                            </template>
                            <template #rightTitle>高亮引导线宽度：</template>
                            <template #rightContent>
                              <a-input-number
                                v-if="item.emphasis.labelLine && item.emphasis.labelLine.lineStyle"
                                v-model:value="item.emphasis.labelLine.lineStyle.width"
                                :min="0"
                                :max="180"
                                :step="1"
                                size="small"
                              />
                            </template>
                          </hv-visual-property-sub-row>

                          <template v-if="item.emphasis.labelLine.lineStyle">
                            <hv-visual-property-sub-row>
                              <template #leftTitle>高亮引导线类型：</template>
                              <template #leftContent>
                                <a-select
                                  v-model:value="item.emphasis.labelLine.lineStyle.type"
                                  size="small"
                                  placeholder="请选择高亮引导线类型..."
                                  dropdownClassName="hv-dark-select-dropdown"
                                >
                                  <a-select-option
                                    :value="option.value"
                                    v-for="(option, itemIndex) in echartsBorderTypeListConst"
                                    :key="option.value + itemIndex"
                                    >{{ option.label }}</a-select-option
                                  >
                                </a-select>
                              </template>
                              <template #rightTitle>高亮引导线透明度：</template>
                              <template #rightContent>
                                <a-input-number
                                  v-model:value="item.emphasis.labelLine.lineStyle.opacity"
                                  :min="0"
                                  :max="1"
                                  :step="0.1"
                                  size="small"
                                />
                              </template>
                            </hv-visual-property-sub-row>

                            <hv-visual-property-sub-row>
                              <template #title>高亮引导线透颜色：</template>
                              <template #content>
                                <hv-color-dropdown-picker
                                  v-model:color="item.emphasis.labelLine.lineStyle.color"
                                  size="small"
                                />
                              </template>
                            </hv-visual-property-sub-row>
                          </template>
                        </template>
                      </template>

                      <template v-if="item.dataSource">
                        <hv-data-source-group
                          v-model:dataSourceType="item.dataSource.type"
                          v-model:dataSource="item.dataSource"
                          :dataSourceList="echartPieDataSourceListConst"
                          :dataSourceDataConfig="dataSourceDataConfig"
                        />
                      </template>
                    </a-col>
                  </a-row>
                </div>
              </template>
              <a-button type="primary" size="small" @click="addSeries">
                <hv-dynamic-icon iconName="PlusOutlined" />添加序列
              </a-button>
            </a-col>
          </a-row>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script lang="ts">
  import {
    echartColorListConst,
    echartLegendListConst,
    echartOrientListConst,
    echartsBorderTypeListConst,
    echartTooltipTriggerListConst,
    echartTooltipTriggerOnListConst,
    echartsSelectedModeListConst,
    cursorListConst,
    echartsFontStyleListConst,
    echartLabelRotateListConst,
    echartOverflowListConst,
    echartLabelPositionListConst,
    echartPieDataSourceListConst,
    echartPieDataSourceConst,
    echartEmphasisFocusListConst,
    echartEmphasisBlurScopeListConst,
  } from '@/visual/commons/consts/dashboard-const';
  import { cloneDeep } from 'lodash';
  import { defineComponent, type PropType } from 'vue';
  import BasePropsGroup from '../common/BasePropsGroup.vue';
  import BorderStyleGroup from '../common/BorderStyleGroup.vue';
  import TransformGroup from '../common/TransformGroup.vue';
  import VisualPropertySubRow from '../common/VisualPropertySubRow.vue';
  import ColorDropdownPicker from '@/visual/components/color-picker/ColorDropdownPicker.vue';
  import ColorPickerList from '@/visual/components/color-picker/ColorPickerList.vue';
  import NumberUnitInput from '../common/NumberUnitInput.vue';
  import SelectAndCustomInput from '../common/SelectAndCustomInput.vue';
  import EchartDistanceInput from '../common/EchartDistanceInput.vue';
  import type DashboardComponentType from '@/visual/commons/types/dashboard-component-type';
  import type PieChartOptionType from '@/visual/commons/types/pie-chart-option-type';
  import useVisualProperty from '@/visual/hooks/use-visual-property';
  import DataSourceGroup from '../common/DataSourceGroup.vue';
  import JsonInputDialog from '../common/JsonInputDialog.vue';
  import HttpRequestDialog from '../common/HttpRequestDialog.vue';

  export default defineComponent({
    name: 'PieChartProperty',
    components: {
      hvBasePropsGroup: BasePropsGroup,
      hvTransformGroup: TransformGroup,
      hvBorderStyleGroup: BorderStyleGroup,
      hvColorDropdownPicker: ColorDropdownPicker,
      hvEchartDistanceInput: EchartDistanceInput,
      hvVisualPropertySubRow: VisualPropertySubRow,
      hvColorPickerList: ColorPickerList,
      hvNumberUnitInput: NumberUnitInput,
      hvSelectAndCustomInput: SelectAndCustomInput,
      hvDataSourceGroup: DataSourceGroup,
    },
    props: {
      compData: {
        type: Object as PropType<DashboardComponentType<PieChartOptionType>>,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      const dataSourceDataConfig = {
        editComp: {
          [echartPieDataSourceConst.json]: JsonInputDialog,
          [echartPieDataSourceConst.httpRequest]: HttpRequestDialog,
        },
        viewComp: {
          [echartPieDataSourceConst.json]: JsonInputDialog,
          [echartPieDataSourceConst.httpRequest]: HttpRequestDialog,
        },
      };

      const { activeKey, propData } = useVisualProperty<PieChartOptionType>(props);

      const resetColor = (index: number) => {
        if (
          propData.value &&
          propData.value?.componentProps &&
          propData.value?.componentProps.series
        ) {
          propData.value.componentProps.series[index].color = cloneDeep(echartColorListConst);
        }
      };

      const removeSeries = (index: number) => {
        if (
          propData.value &&
          propData.value?.componentProps &&
          propData.value?.componentProps.series
        ) {
          propData.value.componentProps.series.splice(index, 1);
        }
      };

      const addSeries = () => {
        if (
          propData.value &&
          propData.value?.componentProps &&
          propData.value?.componentProps.series &&
          propData.value.componentProps.defaultSeries
        ) {
          propData.value.componentProps.series.push(
            cloneDeep(propData.value.componentProps.defaultSeries)
          );
        }
      };

      return {
        activeKey,
        echartLegendListConst,
        echartOrientListConst,
        echartTooltipTriggerListConst,
        echartTooltipTriggerOnListConst,
        echartsBorderTypeListConst,
        echartsSelectedModeListConst,
        cursorListConst,
        echartsFontStyleListConst,
        echartLabelRotateListConst,
        echartOverflowListConst,
        echartLabelPositionListConst,
        echartPieDataSourceListConst,
        echartPieDataSourceConst,
        echartEmphasisFocusListConst,
        echartEmphasisBlurScopeListConst,
        propData,
        dataSourceDataConfig,
        removeSeries,
        addSeries,
        resetColor,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import './PieChartProperty.less';
</style>
